<template>
	<view class="dept-select field-form-item">
		<u-form-item
			:label="label"
			:required="required"
			:prop="prop"
			:right-icon="disabled ? '' : 'arrow-right'"
		>
			<view @click="onClick" style="width: 100%; height: 37px">
				<text v-if="selectValue == null || selectValue === ''" style="color: rgb(192, 196, 204)">{{ placeholder }}</text>
				<text v-else>{{ selectValue }}</text>
			</view>
			<u-popup
				v-if="showSelectDlg"
				v-model="showSelectDlg"
				mode="left"
				length="100%"
				style="background: #F6F6F6;"
			>
				<dept-select-dlg
					:rowKey="props.value"
					:value="value"
					:multiple="multiple"
					@input="onSelectChange"
					@close="onCloseSelectDlg"
				/>
			</u-popup>
		</u-form-item>
	</view>
</template>

<script>
	import { SysCommonBizController } from '@/api';
	import DeptSelectDlg from './deptSelectDlg.vue';
	import { validateWidget } from '@/utils/validate.js';
	export default {
		name: 'deptSelect',
		props: {
			label: {
				type: String,
				default: '部门选择'
			},
			value: {
				type: [String, Number, Array]
			},
			prop: {
				type: String
			},
			props: {
				type: Object,
				default: () => {
					return {
						label: 'deptName',
						value: 'deptId'
					}
				}
			},
			multiple: {
				type: Boolean,
				default: false
			},
			disabled: {
				type: Boolean,
				default: false
			},
			required: {
				type: Boolean,
				default: false
			},
			rules: {
				type: Array
			},
			placeholder: {
				type: String
			}
		},
		components: {
			DeptSelectDlg
		},
		data() {
			return {
				showSelectDlg: false,
				selectedItems: [],
				errorMessage: ''
			}
		},
		methods: {
			onClick() {
				if (this.disabled) return;
				this.showSelectDlg = true;
			},
			onCloseSelectDlg() {
				this.showSelectDlg = false;
			},
			onSelectChange(val) {
				let temp = this.multiple ? val : val[0];
				this.$emit('input', temp);
				this.$emit('change', temp);
			},
			getSelectItems () {
				return this.selectedItems;
			},
			getSelectDeptList() {
				let params = {
          widgetType: 'upms_dept'
        };
        if (this.value == null || this.value.length <= 0) this.selectedItems = [];
        if (this.multiple) {
          params.fieldValues = Array.isArray(this.value) ? this.value : []
        } else {
          params.fieldValues = Array.isArray(this.value) ? this.value[0] : this.value;
          params.fieldValues = params.fieldValues == null ? [] : [params.fieldValues];
        }
        if (Array.isArray(params.fieldValues) && params.fieldValues.length > 0) {
          params.fieldValues = params.fieldValues.join(',');
          SysCommonBizController.viewByIds(this, params).then(res => {
            if (Array.isArray(res)) this.selectedItems = res;
          }).catch(e => {});
        }
			},
			validateWidget() {
				return new Promise((resolve, reject) => {
					validateWidget(this.rules, this.value).then(res => {
						this.errorMessage = '';
						resolve();
					}).catch(e => {
						this.errorMessage = e;
						resolve(e)
					});
				});
			}
		},
		computed: {
			selectValue() {
				let labelList = (this.selectedItems || []).map(item => item[this.props.label]);
				return labelList.length > 0 ? labelList.join(', ') : undefined;
			}
		},
		watch: {
			value: {
				handler() {
					this.getSelectDeptList();
				},
				immediate: true
			}
		}
	}
</script>

<style>
</style>